<%@page import="entity.T_account"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>银行系统</title>
<style type="text/css">
body {
	width: 100%;
}

.wrap_table {
	margin: 0 auto;
	text-align: center;
	margin:0px;
}

table {
	text-align: center;
	margin: 0 auto;
}

table tr:nth-last-child(1) {
	padding-right: 20px;
}

table th {
	padding: 10px;
}

table:nth-last-child(2) tr:hover, table tr:hover a {
	color: white;
	background-color: red;
}

table:nth-last-child(1) tr {align ="left";
	
}

table:nth-last-child(1) td {
	padding: 10px;
}

table:nth-last-child(2) td {
	padding: 5px;
}

#end {
	text-align: right;
}

#name {
	margin-bottom: 10px;
}

#price {
	margin-bottom: 10px;
}

#num {
	margin-bottom: 10px;
}

#type {
	margin-bottom: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/wrap.css"/>
</head>
<body >
<div id="wrap">
			<ul id="menu">
				<li><a href="#">员工管理</a></li>
				<li><a href="addEmp.jsp">员工添加</a>
			</ul>		
</div><br/>
	<div class="wrap_table">
		<template id="parentComponent">
				<div class="header">
					<h2>银行账户信息管理系统管理系统</h2>
					<fieldset style=" width: 650px; margin: 0 280px">
					<legend>搜索</legend>
					<label>姓名:</label>
					<input type="text" v-model="key" placeholder="请输入关键字...">
					<input type="submit" class="button border-main icon-search" value="搜索">
					</fieldset>
				</div>
		</template><br>
		<table border="1" cellspacing="0" cellpadding="0" height="300px">
			<tr>
				<th width="80">编号</th>
				<th width="120">姓名</th>
				<th width="80">卡号</th>
				<th width="140">余额</th>
				<th width="120">操作</th>
			</tr>
			<%
				List<T_account> empsList = (List<T_account>) session.getAttribute("empsList");
				int i = 0;
			%>
			<c:forEach items="${empsList}" var="emp">
				<tr>
					<td>${emp.id }</td>
					<td>${emp.name }</td>
					<td>${emp.number }</td>
					<td>${emp.money }</td>
					<td><input type="button" onclick="update(this)" class="updata"
						value="更新" /> <input type="button" onclick="del(${emp.id })"
						value="删除" /></td>
				</tr>

			</c:forEach>
			<tr>
				<td colspan="6" id="end"><span>共计<%=empsList.size() + 0%>条数据
			</tr>
		</table>
		
		<div
			style="width: 500px; height: 400px; border: 1px solid #000; background-color: white; display: none; position: absolute; left: 40%; top: 10%;"
			id="UpdataDiv">
			<form action="UpdatEmpServlet" method="post" id="UpdataForm">
				<br /> <br />
				<table border="1" cellspacing="0" cellpadding="0"
					style="text-align: left;" width="400" height="200">
					<caption align="top"
						style="font-size: 1.6rem; height: 50px; font-weight: bold;">更新信息</caption>
					<tr style="display: none">
						<td><input type="text" name="id" id="id" value=""></td>
					</tr>
					<tr>
						<td>姓名：<input type="text" name="name" id="name" value=""></td>
					</tr>
					
					<tr>
						<td>卡号：<input id="number" name="number" type="date"
							value="" /></td>
					</tr>
					<tr>
						<td>余额：<input type="text" name="money" id="money" value=""></td>
					</tr>
					<tr align="center">
						<td><input type="submit" value="提交"> <input
							type="button" value="取消" class="updata2"></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(".updata").click(function(){
			$("#UpdataDiv").css("display","block");
			
			});
		$(".updata2").click(function(){
			$("#UpdataDiv").css("display","none");
			});
			
		</script>
	<script type="text/javascript">
		function update(obj) {
			   var id=$(obj).parents("tr").children("td").eq(0).text();
			   var name=$(obj).parents("tr").children("td").eq(1).text();
			   var number=$(obj).parents("tr").children("td").eq(2).text();
			   var money=$(obj).parents("tr").children("td").eq(3).text();
			   document.getElementById("id").value = id;
			   document.getElementById("name").value = name;
			   document.getElementById("number").value = number;
			   document.getElementById("money").value = money;  
			}
		function  del(id) {
			 if (confirm("确定删除该数据？")) {
				window.location.href="DelServlet?id="+id;
	         }
		}
		function a(){
			$.ajax({  
	    		url:"EmpShowServlet",//servlet文件的名称
	    		type:"POST",
	    		success:function(e){
	    			alert("servlet调用成功！");
	    		}
	    	});
			
		}
		</script>
</body>
</html>